<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="a"></div>

    <script>

        // 标签的属性
        //    自有属性    class   id          点语法直接访问
        //        class -> className
        //    自定义属性  qq=""   qw=""       不能通过点语法访问    
        //    getAttribute()
        //    setAttribute()
        //    removeAttribute()

        // 标签也是一种对象
        //     可以给对象添加自定义属性 




        // DOM操作
        //    新增
        //       创建标签   document.createElement(标签的名字)
        //       插入到页面中   在后面插入appendChild()     在指定的子元素前面插入insertBefore()
        //    删除
        //      remove()  删除自己
        //      removeChild()  删除指定的子元素
        //      innerHTML = ''  清空所有的内容
        //    改
        //      replaceChild()   替换指定的子元素
        //    克隆
        //      cloneNode(bool)   true复制所有    false只复制元素自己，默认值
        //    查询
        //       id
        //       className
        //       name
        //       querySelector
        //       querySelectorAll          before/after获取不到的
        //       找父元素   parentElement / parentNode
        //       找子元素   children / childNodes   (firstChild / firstElementChild / lastChild / lastElementChild)
        //       找兄弟     previousElementSibling / previousSibling  / nextElementSibling / nextSibling

        // 注意
        //    innerHTML  处理的是字符串   oDiv.innerHTML = '<p></p>'
        //    新增节点的时候   标签对象    appendChild('<p></p>') 这是错的,必须创建标签

        //    元素 ， 节点(文本，标签，注释等都是节点)

        //    文档碎片  document.createDocumentFragment()
        
        //    网页的重绘和回流



        var oDiv = document.querySelector('div');

        // oDiv.index = 1 ;    // 给对象添加自定义属性

        // oDiv.setAttribute('index' , 1) ;    // 给标签添加自定义属性

    </script>

</body>

</html>